<template>
    <ZZDialog class="roamline" title="飞行漫游" @close="callbackClose()">
        <el-table
        :data="tableData"
        style="width: 100%">
            <el-table-column label="名称" width="100">
                <template #default="scope">
                    {{ scope.row.name }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template  #default="scope">
                    <el-button size="small" @click="startFly(scope.row.type)">飞行</el-button>
                </template>
            </el-table-column>
        </el-table>
    </ZZDialog>
</template>

<script>
import ZZDialog from '../../../common/ZZDialog.vue';
import { mandata,airdata,grounddata,modeldata } from "./data";
import { LengthFormat,TimeFormat,DateFormat } from "@/utils/dateFormat";

export default {
    components:{
        ZZDialog
    },
    data(){
        return{
            viewer:undefined,
            tableData:[
                {name:'行人漫游',type:'man'},
                {name:'空中漫游',type:'air'},
                {name:'贴地漫游',type:'ground'},
                {name:'贴模漫游',type:'model'}
            ],
            flyLine:null
        }
    },
    beforeMount(){
        this.viewer = this.$store.state.viewer
    },
    mounted() {
        
    },
    methods:{
        startFly(type) {
            switch (type) {
                case 'man':
                    if(this.flyLine){ this.flyLine.stop() }
                    this.flyLine = new zz3d.FlyLine(this.viewer, mandata);
                    this.flyLine.start();
                    //显示popup
                    this.flyLine.popup = {
                        anchor: [0, -20], //左右、上下的偏移像素值。
                        timeRender: true, //实时更新html
                        html: ()=> {
                            var params = this.flyLine.timeinfo;
                            if (!params) return "即将开始漫游";
                            var html = '<div style="width:200px;">' +
                                '总距离：' + LengthFormat(this.flyLine.alllen,'') + '<br/>' +
                                '总时间：' + TimeFormat(this.flyLine.alltimes / this.viewer.clock.multiplier) + '<br/>' +
                                '开始时间：' + DateFormat(this.flyLine.startTime,"yyyy-M-d HH:mm:ss") + '<br/>' +
                                '剩余时间：' + TimeFormat((this.flyLine.alltimes - params.time) / this.viewer.clock
                                    .multiplier) + '<br/>' +
                                '剩余距离：' + LengthFormat(this.flyLine.alllen - params.len,'') + ' <br/>' +
                                '</div>';
                            return html;
                        }
                    }
                    this.viewer.zz.popup.show(this.flyLine, this.flyLine.property);
                    break;
                case 'air':
                    if(this.flyLine){
                        this.flyLine.stop()
                        this.flyLine = new zz3d.FlyLine(this.viewer, airdata);
                        this.flyLine.start();
                    }else{
                        this.flyLine = new zz3d.FlyLine(this.viewer,airdata);
                        this.flyLine.start();
                        new zz3d.DivPoint(this.viewer, {
                            html: `<div>
                            <h2>欢迎来到洛阳！</h2>
                            <p>飞行漫游</p>
                            </div>`,
                            anchor: [0, 0],
                            position: this.flyLine.property,
                            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 200000),//按视距距离显示 
                            scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 100000, 0.1),
                        });
                    }
                    break;
                case 'ground':
                    if(this.flyLine){this.flyLine.stop()}
                    this.flyLine = new zz3d.FlyLine(this.viewer, grounddata);
                    //贴地时，异步计算完成后开始
                    this.flyLine.clampToGround( () =>{ //异步计算完成贴地后再启动
                        //贴地后的路线值为flyLine.points
                        this.flyLine.start();
                        //显示popup
                        this.flyLine.popup = {
                            anchor: [0, -20], //左右、上下的偏移像素值。
                            timeRender: true, //实时更新html
                            html:  ()=> {
                                var params = this.flyLine.timeinfo;
                                if (!params) return "即将开始漫游";
                                var html = '<div style="width:200px;">' +
                                    '总距离：' + LengthFormat(this.flyLine.alllen) + '<br/>' +
                                    '总时间：' + TimeFormat(this.flyLine.alltimes / this.viewer.clock.multiplier) + '<br/>' +
                                    '开始时间：' + DateFormat(this.flyLine.startTime,"yyyy-M-d HH:mm:ss") + '<br/>' +
                                    '剩余时间：' + TimeFormat((this.flyLine.alltimes - params.time) / this.viewer.clock
                                        .multiplier) + '<br/>' +
                                    '剩余距离：' + LengthFormat(this.flyLine.alllen - params.len) + ' <br/>' +
                                    '</div>';
                                return html;
                            }
                        }
                        this.viewer.zz.popup.show(this.flyLine, this.flyLine.property);
                    },
                    // //区别在has3dtiles标识，true时贴模型表面,false时贴地
                    {has3dtiles:false}); 
                    break;
                case 'model':
                    if(this.flyLine){this.flyLine.stop()}
                    this.flyLine = new zz3d.FlyLine(this.viewer, modeldata);
                    //贴地时，异步计算完成后开始
                    this.flyLine.clampToGround( () =>{ //异步计算完成贴地后再启动
                        //贴地后的路线值为flyLine.points
                        this.flyLine.start();
                        //显示popup
                        this.flyLine.popup = {
                            anchor: [0, -20], //左右、上下的偏移像素值。
                            timeRender: true, //实时更新html
                            html:  ()=> {
                                var params = this.flyLine.timeinfo;
                                if (!params) return "即将开始漫游";
                                var html = '<div style="width:200px;">' +
                                    '总距离：' + LengthFormat(this.flyLine.alllen) + '<br/>' +
                                    '总时间：' + TimeFormat(this.flyLine.alltimes / this.viewer.clock.multiplier) + '<br/>' +
                                    '开始时间：' + DateFormat(this.flyLine.startTime,"yyyy-M-d HH:mm:ss") + '<br/>' +
                                    '剩余时间：' + TimeFormat((this.flyLine.alltimes - params.time) / this.viewer.clock
                                        .multiplier) + '<br/>' +
                                    '剩余距离：' + LengthFormat(this.flyLine.alllen - params.len) + ' <br/>' +
                                    '</div>';
                                return html;
                            }
                        }
                        this.viewer.zz.popup.show(this.flyLine, this.flyLine.property);
                    },{has3dtiles:true}); 
                    break;
                default:
                    break;
            }
        },
        callbackClose(){
            if(this.flyLine){
                this.flyLine.destroy()
            }
            this.$emit('close') 
        }
    }
}
</script > 
<style scoped>
.roamline {
    position: absolute;
    top: 100px;
    right: 200px;
    height: 200px;
    width: 220px;
    overflow-y: auto;
}
</style>